<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { axiosrmedical } from '../../http/axiosRead';
import { axioswmedical } from '../../http/axiosWrtie';
import { showToast, showDialog } from 'vant';

const router = useRouter();
const patientId = ref<number>(1);
const patientData = ref<any>(null);
const loading = ref<boolean>(false);
const refundLoading = ref<boolean>(false);
const selectedItem = ref<any>(null);
const refundReason = ref<string>('');
const showRefundDialog = ref<boolean>(false);

// 获取患者支付信息
const fetchPatientPaymentData = async (id: number) => {
  loading.value = true;
  try {
    const response = await axiosrmedical.get('/Payment/GetPaidPaymentItems', {
      headers: { 'axiosrmedical': true },
      params: { patientId: id }
    });
    
    if (response.data.code === 200) {
      patientData.value = response.data.data;
    } else {
      // 处理错误
      console.error('获取患者支付信息失败:', response.data.msg);
    }
  } catch (error) {
    console.error('请求出错:', error);
  } finally {
    loading.value = false;
  }
};

// 切换患者
const switchPatient = () => {
  router.push('/patient-select?from=refund');
  // 假设从患者选择页面返回时会带上选中的患者ID
};

const goToRefundForm = (item: any) => {
  router.push({
    name: 'RefundForm',
    query: {
      id: item.id,
      orderNo: item.orderNo,
      itemName: item.itemName,
      amount: item.amount
    }
  });
};

// 返回首页
const backToHome = () => {
  router.push('/home');
};

// 处理从患者选择页面返回的逻辑
onMounted(() => {
  // 获取URL中的参数
  const urlParams = new URLSearchParams(window.location.search);
  const selectedPatientId = urlParams.get('selectedPatientId');
  
  if (selectedPatientId && !isNaN(Number(selectedPatientId))) {
    patientId.value = Number(selectedPatientId);
  }
  
  fetchPatientPaymentData(patientId.value);
});
</script>

<template>
  <div class="refund-page">
    <div class="header">
      <van-nav-bar
        title="退款页面"
        left-arrow
        @click-left="router.back()"
      />
    </div>

    <div class="content">
      <van-loading v-if="loading" vertical>加载中...</van-loading>
      
      <template v-else-if="patientData">
        <div class="patient-info-card">
          <div class="patient-info-header">
            <div class="patient-name">{{ patientData.patientName }}</div>
            <van-button size="small" plain type="primary" @click="switchPatient">切换患者</van-button>
          </div>
          
          <div class="patient-details">
            <div class="detail-item">
              <span class="label">身份证:</span>
              <span class="value">{{ patientData.idCard }}</span>
            </div>
            <div class="detail-item">
              <span class="label">手机号:</span>
              <span class="value">{{ patientData.phoneNumber }}</span>
            </div>
          </div>
        </div>
        
        <div class="balance-card">
          <div class="balance-title">卡内余额</div>
          <div class="balance-amount">¥{{ patientData.cardBalance.toFixed(2) }}</div>
        </div>
        
        <div class="payment-history">
          <div class="section-title">消费记录</div>
          <div class="payment-list">
            <van-cell-group inset>
              <van-cell v-for="item in patientData.paidItems" :key="item.id">
                <template #title>
                  <div class="payment-item-title">
                    <span>{{ item.itemName }}</span>
                    <span class="payment-amount">¥{{ item.amount.toFixed(2) }}</span>
                  </div>
                </template>
                <template #label>
                  <div class="payment-item-details">
                    <span>{{ item.departmentName }} - {{ item.doctorName }}</span>
                    <span class="payment-date">{{ new Date(item.createdTime).toLocaleDateString() }}</span>
                  </div>
                </template>
                <template #right-icon>
                  <van-button 
                    size="small" 
                    type="danger" 
                    @click="goToRefundForm(item)"
                  >
                    申请退款
                  </van-button>
                </template>
              </van-cell>
            </van-cell-group>
          </div>
        </div>
        
        <div class="action-buttons">
          <van-button 
            plain 
            block 
            class="back-home-btn"
            @click="backToHome"
          >
            返回首页
          </van-button>
        </div>
      </template>
      
      <div v-else class="no-data">
        <van-empty description="暂无数据" />
      </div>
    </div>
  </div>
</template>

<style scoped>
.refund-page {
  min-height: 100vh;
  background-color: #f5f7fa;
  display: flex;
  flex-direction: column;
}

.content {
  flex: 1;
  padding: 16px;
}

.patient-info-card {
  background-color: #fff;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 16px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.patient-info-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.patient-name {
  font-size: 18px;
  font-weight: 500;
}

.patient-details {
  color: #666;
}

.detail-item {
  margin-bottom: 8px;
  display: flex;
}

.label {
  min-width: 60px;
  color: #999;
}

.balance-card {
  background: linear-gradient(135deg, #1989fa, #39a9ed);
  color: #fff;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 16px;
  box-shadow: 0 4px 8px rgba(25, 137, 250, 0.2);
}

.balance-title {
  font-size: 14px;
  margin-bottom: 8px;
}

.balance-amount {
  font-size: 28px;
  font-weight: 500;
}

.section-title {
  font-size: 16px;
  font-weight: 500;
  margin: 16px 0 8px;
}

.payment-list {
  margin-bottom: 20px;
}

.payment-item-title {
  display: flex;
  justify-content: space-between;
  font-weight: 500;
}

.payment-amount {
  color: #ee0a24;
}

.payment-item-details {
  display: flex;
  justify-content: space-between;
  color: #999;
  font-size: 12px;
}

.action-buttons {
  width: 100%;
  max-width: 320px;
  margin: 20px auto;
}

.refund-btn {
  margin-bottom: 12px;
  height: 44px;
  background-color: #1989fa;
  border: none;
  border-radius: 22px;
}

.back-home-btn {
  height: 44px;
  border-radius: 22px;
  border-color: #1989fa;
  color: #1989fa;
}

.no-data {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 300px;
}
</style> 